<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <splitpanes>
        <pane  size="78">
          <splitpanes horizontal>
            <pane>
              <el-card class="scroll-pane">
                <current-user/>
                <favorite/>
              </el-card>
            </pane>
          </splitpanes>
        </pane>
        <pane size="22">
          <splitpanes horizontal>
            <pane>
              <schedule/>
            </pane>
            <pane>
              <sys-log/>
            </pane>
          </splitpanes>
        </pane>
      </splitpanes>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
const CurrentUser = defineAsyncComponent(() => import('./current-user.vue'));
const Favorite = defineAsyncComponent(() => import('./favorite.vue'));
const Schedule = defineAsyncComponent(() => import('./schedule.vue'));
const SysLog = defineAsyncComponent(() => import('./sys-log.vue'));
</script>

<style scoped>
.scroll-pane {
  overflow-y: auto; 
  overflow-x: hidden; 
  height: 100%;
}

.splitpanes {
  height: 100%; 
}

.pane {
  height: 100%; 
  overflow: hidden; 
}

.current-user, .favorite, .schedule, .sys-log {
  height: 100%; 
  overflow: auto; 
}

</style>
